<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<meta name="author" content="金西振" />
		<title></title>
		<style></style>
	</head>
	<body>
		<button onclick="add()">增加历史记录</button>
		<button onclick="back()">后退</button>
		<button onclick="go()">前进</button>
		<script>
			var index = 0;
			function add() {
				// 手动添加历史记录: 参数1：添加历史记录时保存的数据，当触发popstate事件的时候，可以使用ev.state获取历史记录状态的变化
				history.pushState({ value: index }, '');
				console.log('index: ', index);
				index++;
			}

			function go() {
				history.go(1);
			}

			function back() {
				history.go(-1);
			}

			console.log('history.state: ', history.state);

			// 监听历史记录状态的变化：只有点击浏览器的前进或者后退按钮，还有使用go、back、forward函数才能触发
			window.onpopstate = function (ev) {
				console.log('ev: ', ev.state);
			};
		</script>
	</body>
</html>
